<template>
  <div id="cart">
    <!-- 我的购物车 -->
    <div class="cart-header">
      <div class="header-content">
        <div class="header-left">
          <img src="../assets/公安部logo.png" alt="" />
          <h1>我的购物车</h1>
          <p>温馨提示：XXXXXXXXXXXXXXXX</p>
        </div>
        <div class="header-right">
          <router-link to="/Login">登录</router-link>
          <router-link to="/Reigiter" style="border: none">注册</router-link>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="myShop">
      <div class="myShop-content">
        <!-- 商品全选 -->
        <div class="chooseAll">
          <div class="col-item" style="width: 110px">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
          </div>
          <div class="col-item" style="width: 120px">&nbsp;</div>
          <div
            class="col-item"
            style="width: 380px; justify-content: flex-start"
          >
            商品名称
          </div>
          <div class="col-item" style="width: 158px">单价</div>
          <div class="col-item" style="width: 150px">数量</div>
          <div class="col-item" style="width: 201px">小计</div>
          <div class="col-item" style="width: 80px">操作</div>
        </div>

        <!-- 商品列表 -->
        <div class="chooseAll" style="height: 117px" v-for="item in cart.projects" :key="item.cartId">
          <!-- 选择该商品 -->
          <div class="col-item" style="width: 110px">
            <el-checkbox :true-label="item.cartId">{{ item.cartId }}</el-checkbox>
          </div>
          <!-- 首页图 -->
          <div class="col-item" style="width: 120px">&nbsp;</div>
          <!-- 名称+版本+颜色 -->
          <div class="col-item" style="width: 380px; font-size: 18px; justify-content: flex-start">
            {{ item.name }}&nbsp;{{ item.edition }}&nbsp;{{ item.color }}
          </div>
          <!-- 单价 -->
          <div class="col-item" style="width: 158px; font-size: 16px;">{{ item.price }}元</div>
          <!-- 数量 -->
          <div class="col-item" style="width: 150px">
            <el-input-number v-model="item.amount" @change="handleChange" :min="1" :max="99" label="描述文字"></el-input-number>
          </div>
          <!-- 小计 -->
          <div class="col-item" style="width: 201px; font-size: 16px; color: #FF6700;">{{ item.price*item.amount }}元</div>
          <!-- 移除商品 -->
          <div class="col-item" style="width: 80px">x</div>
        </div>

        <!-- 商品结算 -->

        <!-- 推荐title -->

        <!-- 推荐商品 -->
      </div>
    </div>
    <!-- 脚部 -->
    <Footer></Footer>
  </div>
</template>

<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];

export default {
  data() {
    return {
      //计数器初始数
      num: 1,
      //全选框
      checkAll: false,
      //选中的复选框
      checkedCities: ["上海", "北京"],
      //城市选项数组
      cities: cityOptions,
      //样式控制
      isIndeterminate: true,


      //购物车中的商品
      cart: {
        userId: 1,
        projects: [
          {
            cartId: 1,
            projectId: 1,
            categoryId: 4,
            name: 'Xiaomi MIX Fold 3',
            edition: '12GB+256GB',
            color: '龙鳞纤维版',
            price: 8999.00,
            amount: 3,
            status: '1',
            imgPath: '',
          },
          {
            cartId: 2,
            projectId: 1,
            categoryId: 4,
            name: 'Xiaomi MIX Fold 3',
            edition: '16GB+1TB',
            color: '墨影黑',
            price: 10999.00,
            amount: 3,
            status: '1',
            imgPath: '',
          },
          {
            cartId: 3,
            projectId: 4,
            categoryId: 6,
            name: 'Xiaomi Civi 3',
            edition: '16GB+1TB',
            color: '玫瑰紫',
            price: 2799.00,
            amount: 1,
            status: '1',
            imgPath: '',
          },
          {
            cartId: 4,
            projectId: 7,
            categoryId: 9,
            name: 'Redmi K70',
            edition: '12GB+256GB',
            color: '晴雪',
            price: 2499.00,
            amount: 9,
            status: '1',
            imgPath: '',
          },
        ],
      }
    };
  },
  methods: {
    change(trueLabel) {
      console.log(trueLabel);
    },


    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },


    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
/* 我的购物车 */
.cart-header {
  height: 100px;
  width: 100%;
  border-bottom: 2px solid #ff6700;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-content {
  height: 100%;
  width: 1200px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 顶部栏左侧 */
.header-left {
  display: flex;
  align-items: baseline;
}
.header-left > img {
  margin-right: 35px;
}
.header-left > h1 {
  margin: 0 15px;
  font-weight: 400;
  font-size: 32px;
  color: #424242;
}
.header-left > p {
  font-size: 12px;
  color: #757575;
}
/* 顶部栏右侧 */
.header-right {
  display: flex;
}
.header-right > a {
  width: 35px;
  text-decoration: none;
  font-size: 12px;
  color: #757575;
  border-right: 1px solid #e0e0e0;
}

/* 商品列表 */
.myShop {
  width: 100%;
  background-color: #f5f5f5;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.myShop-content {
  margin: 25px 0;
  background-color: white;
  width: 1200px;
}
/* 商品全选 */
.chooseAll {
  height: 70px;
  width: 100%;
  border-bottom: 1px solid #E0E0E0;

  display: flex;
  align-items: center;
}
.col-item {
  height: 100%;
  font-size: 14px;
  color: #424242;

  display: flex;
  justify-content: center;
  align-items: center;
}
/* 商品列表 */
</style>